<template>
  <view class="addressslist">
    <view class="addressbox">
      <view
        v-if="addressList.length>0"
        class="addresssBox"
      >
        <view
          class="addresssli"
          v-for="(item,index) in addressList"
          :key="index"
          @tap="selectAddress(item)"
        >
          <view class="addressslicon">
            <view class="addresssliname">
              <view>联系人：&nbsp;{{item.realname}}&nbsp;
                <text
                  class="addressslinameDefault"
                  v-if="item.isDefault==1"
                >默认</text>
              </view>
              <span>{{item.telephone}}</span>
            </view>
            <view class="addresssliinfo">
              <view class="addresssliinfotext">
                <view class="addresssliinfotextl">
                  详细地址：
                </view>
                <view class="">
                  {{item.province+item.city+item.country+item.address}}
                </view>
              </view>
            </view>
          </view>
          <view class="receipt">
            <view
              class="receiptl"
              v-if="item.isDefault"
            >
              <view
                class="receiptlImg"
                v-if="item.isDefault"
                @tap.stop="editFun(item)"
              >⊙</view>
              <!-- <image class="receiptlImg" v-else :src="imgUrl+'icon1.png'" mode="widthFix"></image> -->
              默认
            </view>
            <view class="receiptlist">
              <view
                class="addresssliedit"
                @tap.stop="editFun(item)"
              >编辑</view>
              <view
                class="addresssliedit receiptliedit"
                v-if="item.isDefault!=1"
                @tap.stop="deleteFun(item)"
              >删除</view>
            </view>
          </view>
        </view>
      </view>
      <sunui-template
        v-else
        title="快去添加地址吧"
      />
    </view>
    <view
      class="delgoods"
      v-if="delgoodsshow"
    >
      <view class="delgoodsctn">
        <view class="delgoodstit">确认删除该地址吗?</view>
        <view class="delgoodsbtn">
          <view @click="closeshow">取消</view>
          <view @click="DelGoodsFun">确定</view>
        </view>
      </view>
    </view>
    <view class="addaddressbtn ">
      <view @tap="editFun()" class="btn-class-w-h">
        +新增地址
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      addressList: {},
      delgoodsshow: false,
    }
  },
  onShow() {
    this.init()
  },
  onLoad(option) {},
  methods: {
    //初始化方法
    async init() {
      var that = this
      var data = {}
      const { addresseeList } = await this.$apiFun.getApi(
        this.$api.userDetailApi,
        data
      )
      console.log('res-----------', addresseeList)
      that.addressList = addresseeList
    },
    // 返回订单页
    selectAddress(item) {
      // if(this.shopId){
      // 	this.apply_alter_addressApi(item.id)
      // 	uni.navigateTo({
      // 		url:'/pages_goodsClass/Shopcart/uni_Orderconfirm?obj='+encodeURIComponent(JSON.stringify(item))
      // 	})
      // }
    },
    // 新增修改接口
    editFun(item) {
      let url = item
        ? 'uni_Address?obj=' + encodeURIComponent(JSON.stringify(item))
        : 'uni_Address'
      uni.navigateTo({
        url: url,
      })
    },
    DelGoodsFun() {
      const that = this
      const data = [this.deleteFunid]
      this.$apiFun.delApi(this.$api.deleteContactsApi, data)
      that.init()
      uni.showToast({
        icon: 'none',
        title: '删除成功',
      })
      that.delgoodsshow = false
    },
    closeshow() {
      this.delgoodsshow = false
    },
    deleteFun(item) {
      this.deleteFunid = item.realname
      this.delgoodsshow = true
    },
    receiptlFun(id, index) {
      this.address_defaultApi(id)
    },
    address_defaultApi(id) {
      var that = this
      var data = { id: id }
      this.$apiFun.postApi(
        this.$api.setDefaultApi,
        data,
        function (res) {
          if (res.code == 200) {
            uni.showToast({
              icon: 'none',
              title: res.msg,
            })
            setTimeout(() => {
              that.init()
            }, 1000)
          }
        },
        function (err) {
          uni.showToast({
            icon: 'none',
            title: err.msg,
          })
        }
      )
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
page {
  height: 100%;
  width: 100%;
}
.addressslist {
  height: 100%;
  box-sizing: border-box;
  background-color: #000000;
  .addressbox {
    height: 100%;
  }
}
.addresssBox {
  padding: 5rpx 15rpx 150rpx;
}
.addresssli {
  width: 100%;
  overflow: hidden;
  // background-color: rgba(255, 255, 255,.1);
  padding: 38rpx 0 30rpx;
  margin: 20rpx 0;
  border-radius: 6rpx;
  .addressslicon {
    padding: 0 30rpx 30rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #cccccc;
  }

  .receipt {
    padding: 30rpx 30rpx 0;
    overflow: hidden;
    height: auto;
  }
  .receiptl {
    float: left;
    box-sizing: border-box;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 25rpx;
    font-size: 24rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
    .receiptlImg {
		margin-right: 5rpx;
      font-size: 40rpx;
	  border-radius: 50%;
	  color: #3b82f6;
    }
  }
  .receiptlist {
    float: right;
    display: flex;
  }
  .addresssliedit {
    width: 80rpx;
    box-sizing: border-box;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 25rpx;
    text-align: right;
    font-size: 24rpx;
    color: rgba(255, 255, 255,1);
  }
  .receiptliedit {
    margin-left: 20rpx;
  }
  .addresssliname {
    height: 28rpx;
    line-height: 28rpx;
    font-size: 26rpx;
    color: rgba(255, 255, 255,1);
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    .addressslinameDefault {
      font-size: 22rpx;
      color: #3b82f6;
      padding: 2rpx 5rpx;
      border-radius: 6rpx;
      border: 1rpx solid #3b82f6;
      margin-left: 5rpx;
    }
  }
  .addresssliinfo {
    display: flex;
    font-size: 26rpx;
    line-height: 30rpx;
    .addresssliinfotext {
      display: flex;
      .addresssliinfotextl {
        white-space: nowrap;
      }
      .addresssliinfotextr {
        flex: 1;
      }
    }
  }
}
.addaddressbtn {
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30rpx;
  display: flex;
}
.addaddressbtn view {
  margin: auto;
  width: 90%;
  height: 80rpx;
  color: #ffffff;
  font-size: 24rpx;
  float: left;
  border-radius: 0;
  text-align: center;
  line-height: 80rpx;
  background: linear-gradient(to right, #ff7a81, #fd2f79);
}
.delgoods {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  z-index: 1000;
}
.delgoodsctn {
  width: 80%;
  height: 300rpx;
  background-color: rgba(0, 0, 0,.9);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 5%;
}
.delgoodstit {
  width: 100%;
  height: 200rpx;
  line-height: 200rpx;
  overflow: hidden;
  text-align: center;
  color: rgba(255, 255, 255,1);
  font-size: 34rpx;
}
.delgoodsbtn {
  height: 100rpx;
  overflow: hidden;
  text-align: center;
}
.delgoodsbtn view {
  width: 150rpx;
  height: 70rpx;
  display: inline-block;
  line-height: 70rpx;
  background-color: #f6f6f6;
  margin-right: 50rpx;
  color: rgba(0, 0, 0,1);
  font-size: 30rpx;
}
.delgoodsbtn view:nth-child(2) {
  background-color: #eb453c;
  color: #ffffff;
  margin-right: 0;
}
</style>
